<!DOCTYPE html>
<html xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1">
    <link rel="stylesheet" href="http://139.198.32.85:8082/css/element.css">
    <style>
        .div1{
            width:145px;
            height: 145px;
            background-color: #409eff;
            border-radius: 50%;
            text-align: center;
            line-height: 145px;
            margin: 0 auto;
            margin-top: 50px;
            transition: background-color 0.3s;
        }
        .div1:active {
            background-color: #3a8ee6;
        }
        .div2{
            background-color: #67C23A;
            border-radius: 50%;
            width:13px;
            height:13px;
            margin-right: 5px;
        }
        .div3{
            color:#8c939d;
            display: flex;
            align-items: center;
        }
        .reader-box {
            position: fixed;
            top: 0;
            bottom: 0;
            left: 0;
            right: 0;
            background-color: rgba(0, 0, 0, 0.5);
        }

        .reader {
            width:100%;
        // width: 540rpx;
        // height: 540rpx;
            position: absolute;
            top: 50%;
            left: 50%;
            transform: translate(-50%, -50%);
        }
    </style>
</head>
<body>
<div style="background-color:#409eff;color:white;height:40px;width:100%;top:0px;font-size:17px;text-align:center;line-height:40px;">装箱扫码</div>
<div id="app">
    <div>
        <div class="demo-input-suffix" style="margin-top:30px">
            账号：<el-input
                     placeholder="请输入登录账号"
                     v-model="userName"
                     style="width: 77%">
                   </el-input>
        </div>
        <div class="demo-input-suffix" style="margin-top:30px">
            密码：<el-input
                placeholder="请输入密码"
                show-password
                v-model="passWord"
                style="width: 77%">
        </el-input>
        </div>
        <el-button type="primary" style="width:100%;margin-top:30px" @click="loginApi()">登录</el-button>
    </div>
    <div>
        <el-button type="success" style="width:100%;margin-top:30px" @click="createBox()">创建箱子</el-button>
    </div>

    <div  style="margin-top:30px"><span style="font-weight: bold">当前箱编号：{{currentBoxCode}}</span></div>
    <div><span style="font-weight: bold">箱容量：{{currentBoxCapacity}}</span></div>
    <div><span style="font-weight: bold">装箱人：{{currentBoxUserName}}</span></div>
    <div><span style="font-weight: bold">当前箱内设备数：{{currentDeviceCount}}</span></div>
    <view class="reader-box" v-if="isScaning">
        <view class="reader" id="reader"></view>
    </view>
    <div>
        <el-button type="warning" style="width:100%;margin-top:30px" @click="smDevice()">扫码入箱</el-button>
    </div>

    <div>
        <el-button type="success" style="width:100%;margin-top:30px" @click="reloadBox()">刷新箱子</el-button>
    </div>


</div>
</body>
<script type="text/javascript" src="http://139.198.32.85:8082/js/vue.js"></script>
<script type="text/javascript" src="http://139.198.32.85:8082/js/jquery.js"></script>
<script type="text/javascript" src="http://139.198.32.85:8082/js/element.js"></script>
<script type="text/javascript" src="http://139.198.32.85:8082/js/axios.js"></script>
<script type="text/javascript" src="http://139.198.32.85:8082/js/vue-qrcode-reader.umd.js"></script>
<script type="text/javascript" src="http://139.198.32.85:8082/js/jweixin-1.4.0.js"></script>
<script src="https://cdn.jsdelivr.net/npm/html5-qrcode/dist/html5-qrcode.min.js"></script>

<script th:inline="javascript">
    var baseUrl = "http://139.198.32.85:8082"
    //http://139.198.32.85:8082
    
    //http-://192.168.10.6:8081
    new Vue({
        el: '#app',
        data: function() {
            return {
                uniqueIdentifier:'',//H5端签到用户的唯一标识
                time:'',//实时时间
                userName:'',//登录账号
                passWord:'',//登录密码
                isLogin:false, //是否登录
                currentBoxCode:'', //当前箱子编号
                currentBoxCapacity:'', //当前箱子容量
                currentBoxUserName:'', //当前箱子装箱人
                currentDeviceCount:'', //当前箱子设备数量
                reloadBoxData:false,
                html5Qrcode: null,
                isScaning: false,

            }
        },
        methods: {
            //扫描设备
            smDevice(){
                this.findOneBox();

                this.isScaning = true;
                Html5Qrcode.getCameras().then((devices) => {
                    if (devices && devices.length) {
                        this.html5Qrcode = new Html5Qrcode('reader');
                        this.html5Qrcode.start(
                            {
                                facingMode: 'environment'
                            },
                            {
                                focusMode: 'continuous', //设置连续聚焦模式
                                fps: 5,       //设置扫码识别速度
                                qrbox: 280   //设置二维码扫描框大小
                            },
                            (decodeText, decodeResult) => {
                                if (decodeText) {  //这里decodeText就是通过扫描二维码得到的内容
                                   alert(decodeText)
                                   this.stopScan(); //关闭扫码功能
                                }
                            },
                            (err) => {
                                // console.log(err);  //错误信息
                            }
                        );
                    }
                });

            },
            stopScan() {
                console.log('停止扫码')
                this.isScaning = false;
                if(this.html5Qrcode){
                    this.html5Qrcode.stop();
                }
            },
            //创建箱子
            createBox(){
                if (!localStorage.getItem('user_token')){
                    this.$message("请登录")
                    return;
                }
                axios.post(baseUrl+'/system/box',
                    {
                        boxCapacity:100
                    },
                    {
                        headers: {
                            'Authorization': localStorage.getItem('user_token')
                        }
                    }
                ).then(res => {
                    if(res.data.code==200){
                        this.currentBoxCode = res.data.data.boxCode
                        this.currentBoxCapacity = res.data.data.boxCapacity
                        this.currentBoxUserName = res.data.data.createName
                        this.currentDeviceCount = res.data.data.deviceCount
                        localStorage.setItem('currentBoxCode', this.currentBoxCode);
                        this.$message.success("箱子已创建")
                    }
                    if(res.data.code==401){
                        this.$message.error("请重新登录")
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //登录
            loginApi(){
                if (!this.userName || !this.passWord){
                    this.$message("账号密码不能为空")
                    return
                }
                axios.post(baseUrl+'/login',
                    {
                        username:this.userName,
                        password:this.passWord,
                    }
               ).then(res => {
                    if(res.data.code==200){
                        this.isLogin = true
                        localStorage.setItem('user_token', res.data.token);
                        localStorage.setItem('user_name',this.userName)
                        localStorage.setItem('pass_word',this.passWord)
                        this.$message.success("登录成功")
                    }

                }).catch(err => {
                    console.log(err);
                });
            },
            //实时时间
            getRealTime() {
                const date = new Date();
                const year = date.getFullYear();
                const month = date.getMonth()+1;
                const day = date.getDate();
                const hours = date.getHours();
                const minutes = date.getMinutes();
                const seconds = date.getSeconds();
                let m = '';
                if (month<10){
                    m='0';
                }
                let d = '';
                if (day<10){
                    d='0';
                }
                let h = '';
                if (hours<10){
                    h='0';
                }
                let f = '';
                if (minutes<10){
                    f='0';
                }
                let s = '';
                if (seconds<10){
                    s = '0';
                }

                this.time =  `${year}-${m}${month}-${d}${day} ${h}${hours}:${f}${minutes}:${s}${seconds}`;

            },
            //根据箱子编号查询最新箱子数据
            findOneBox(){
                if (!localStorage.getItem('user_token')){
                    this.$message("请登录")
                    return;
                }
                let that = this;
                if(!this.currentBoxCode){
                    this.$message.error("请先创建箱子");
                    return;
                }
                axios.get(baseUrl+'/system/box/'+this.currentBoxCode, {
                    params: {

                    },
                    headers: {
                        'Authorization': localStorage.getItem('user_token')
                    }
                }).then(res => {
                    console.log(res)
                    if(res.data.code==200 && res.data.data){
                        this.currentBoxCapacity = res.data.data.boxCapacity
                        this.currentBoxUserName = res.data.data.createName
                        this.currentDeviceCount = res.data.data.deviceCount
                        this.reloadBoxData = true
                    }else{
                        this.currentBoxCode = ''
                        this.$message.error("请先创建箱子");
                    }
                    if(res.data.code==401){
                        this.$message.error("请重新登录")
                    }
                }).catch(err => {
                    console.log(err);
                });
            },
            //刷新箱子数据按钮
            reloadBox(){
                this.reloadBoxData = false;
                this.findOneBox();
                if (this.reloadBoxData){
                    this.$message.success("数据已刷新");
                }
            }
        },
        created(){
            if (localStorage.getItem('user_name')){
                this.userName =  localStorage.getItem('user_name')
            }
            if (localStorage.getItem('pass_word')){
                this.passWord =  localStorage.getItem('pass_word')
            }
            if(localStorage.getItem('currentBoxCode')){
                this.currentBoxCode =  localStorage.getItem('currentBoxCode')
                this.findOneBox()
            }
            setInterval(() => {
                this.getRealTime();
            }, 1000);
            const url = window.location.href;
            const regex = /[?&]liveId(?:=([^&#]*)|&|#|$)/;
            const matches = regex.exec(url);
            const paramValue = matches && matches[1] ? decodeURIComponent(matches[1].replace(/\+/g, ' ')) : null;

            // 检查是否已经为用户生成了一个唯一标识符
            if (!localStorage.getItem('user_id')) {
                // 如果没有，生成一个唯一的标识符
                var user_id = 'uid_' + Math.random().toString(36).substring(2, 15);
                localStorage.setItem('user_id', user_id);
            }
            // 获取保存的唯一标识符
            this.uniqueIdentifier = localStorage.getItem('user_id');
        }
    })
</script>
</html>